<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="FlipClock-Online">
  <link rel="apple-touch-icon" sizes="180x180" href="./images/favicon.png">
  <link rel="icon" href="./images/favicon.ico">
  <link rel="stylesheet" href="./css/flipclock.css">
  <link rel="stylesheet" href="./css/style.css">
  <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> -->
  <title>FlipClock-翻页时钟</title>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/flipclock.js"></script>
</head>

<body>
  <div id="box">
    <div id="content">
      <div class="clock" id="flipClock"></div>
      <h1 class="date" id='ShowDate'></h1>
    </div>
  </div>
  <script type="text/javascript">
  // mobile
  if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    document.getElementById('flipClock').setAttribute("style", "zoom:1.2;");
  }

  var clock;
  $(document).ready(function() {
    clock = $('.clock').FlipClock({
      clockFace: 'TwelveHourClock',
      showSeconds: false
    });
    showYmd()
    setRegular(0)
    $(document).keydown(function (event) {
        const keyName = event.key.toLocaleLowerCase();
        if ( keyName === 'f') {
          toggleFullscreen()
        }
   })
  });
  function toggleFullscreen() {
  let elem = document.querySelector('#box');

  if (!document.fullscreenElement) {
    elem.requestFullscreen().catch((err) => {
      alert(`Error attempting to enable fullscreen mode: ${err.message} (${err.name})`);
    });
  } else {
    document.exitFullscreen();
  }
}

  var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
  var week = ['Sun', 'Mon', 'Tues', 'Wed', 'Thur', 'Fri', 'Sat'];
  var d = new Date();
  // 每天定时执行参考文章
  /**
   * https://blog.csdn.net/u014789022/article/details/85119677
   *
   * https://blog.csdn.net/Null_Bugs/article/details/80883216
   */

/*
  入参是目标时间的小时数，取值0-23，当然可以根据需要拓展成分钟数，这里主要是提供思路所以从简
 */
  function setRegular(targetHour) {
    var timeInterval, nowSeconds, targetSeconds

    // 计算当前时间的秒数
    nowSeconds = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds()

    // 计算目标时间对应的秒数
    targetSeconds = targetHour * 3600

    //  判断是否已超过今日目标小时，若超过，时间间隔设置为距离明天目标小时的距离
    timeInterval = targetSeconds > nowSeconds ? targetSeconds - nowSeconds : targetSeconds + 24 * 3600 - nowSeconds

    setTimeout(showYmd, timeInterval * 1000)
  }

  function showYmd() {
    // document.getElementById('ShowDate').innerHTML = d.getFullYear() + "年" +(d.getMonth() + 1) + "月" + d.getDate() + "日" + ' 星期'+'日一二三四五六'.charAt(new Date().getDay());
    document.getElementById('ShowDate').innerHTML = d.getFullYear() + "-" + month[d.getMonth()] + "-" + d.getDate() + ', ' + week[d.getDay()];
    setTimeout(showYmd, 24 * 3600 * 1000) //之后每天调用一次

  }

  </script>
</body>

</html>